<template>
    <div id="appfooter">
        <div id="footer">
            <a href="http://127.0.0.1:8080/#/home">
                <span>
                    <i></i>
                </span>
                <span>首页</span>
            </a>
            <a href="http://127.0.0.1:8080#/welfare">
                <span>
                    <i></i>
                </span>
                <span>福利</span>
            </a>
            <a href="http://127.0.0.1:8080/#/shopping">
                <span>
                    <i></i>
                </span>
                <span>购物车</span>
            </a>
            <a href="http://127.0.0.1:8080/#/order">
                <span>
                    <i></i>
                </span>
                <span>订单</span>
            </a>
            <a href="http://127.0.0.1:8080/#/Myjd2">
                <span>
                    <i></i>
                </span>
                <span>我的</span>
            </a>
        </div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped lang="scss">
//底部导航
    #appfooter{
        width:750px;
        height:100px;
        border-top:1px solid #999;
        position:fixed;
        bottom:0;
        background-color:#fff;

        #footer{
            width:100%;
            height:100px;
            display:flex;

            a{
                display:block;
                width:150px;
                height:100px;
                text-decoration:none;

                span:nth-of-type(1){
                    display:block;
                    width:150px;
                    height:50px;
                    margin-top:5px;

                    i{
                        display:block;
                        width:50px;
                        height:45px;
                        background-image:url(../image/home/nav6.2.png);
                        background-repeat:no-repeat;                        
                        margin:auto;                       
                        background-size:100%;
                    }                   
                }
                span:nth-of-type(2){
                    display:block;
                    width:150px;
                    height:60px;
                    //color:#39ac69;
                    text-align:center;
                    font-size:24px;
                    line-height:45px;
                }
            }
            a:nth-of-type(1){
                span:nth-of-type(1){
                    i{
                        background-position:5px -10px;
                    }
                }
                span:nth-of-type(2){
                    color:#666;
                }
            }
            a:nth-of-type(2){
                span:nth-of-type(1){
                    i{
                      background-position:5px -1050px;  
                    }
                }
                span:nth-of-type(2){
                    color:#666;
                }
            }
            a:nth-of-type(3){
                span:nth-of-type(1){
                    i{
                      background-position:5px -222px;  
                    }
                }
                span:nth-of-type(2){
                    color:#666;
                }
            }
            a:nth-of-type(4){
                span:nth-of-type(1){
                    i{
                      background-position:5px -428px;  
                    }
                }
                span:nth-of-type(2){
                    color:#666;
                }
            }
            a:nth-of-type(5){
                span:nth-of-type(1){
                    i{
                      background-position:5px -636px;  
                    }
                }
                span:nth-of-type(2){
                    color:#666;
                }
            }
        }

    }
</style>